<template>
  <view class="content container">
    <u-form
      :model="form"
      ref="uForm"
      :rules="rules"
      :errorType="['message']"
      :border-bottom="false"
    >
      <view class="common-msg-show">
        <view class="information-title">
          <text style="font-size: 30rpx">
            <icon
              color="#e1e1e1"
              style="vertical-align: middle; margin-right: 5px"
              type="waiting"
              size="15"
            />
            {{ getDate }}
          </text>
        </view>
        <view class="common-msg-row">
          <view>
            <view class="add-title">
              <text>填写正文</text>
            </view>
            <u-input
              style="width: 100%"
              v-model="form.content"
              type="textarea"
              placeholder="请填写内容"
              :auto-height="false"
              maxlength="800"
              :clearable="false"
            />
          </view>
          <text class="numerical"> {{ form.content.length }}/800 </text>
        </view>
        <view class="upload-bg">
          <view class="img_ft">
            <text>添加图片</text>
          </view>
          <view class="common-msg-row no-bgcolor">
            <view class="add-img-row">
              <u-upload
                :header="header"
                max-count="3"
                @on-remove="remove"
                @on-uploaded="uploadedOK"
                :action="action"
                del-bg-color="#606165"
                del-color="#fff"
              ></u-upload>
            </view>
          </view>
        </view>
      </view>
    </u-form>
    <u-button
      @tap="submit"
      :custom-style="buttonStyle"
      shape="circle"
      hover-class="none"
      >提交</u-button
    >
  </view>
</template>

<script>
import { API } from "@/config/myApi.js";
import storage from "@/utils/storage.js";
import { lk_common } from "@/config/myConfig.js";
export default {
  data() {
    return {
      form: {
        date: "2022-10-20",
        title: "",
        content: "",
      },
      rules: {
        content: [
          {
            required: true,
            message: "内容不能为空",
            trigger: ["blur", "change"],
          },
          {
            min: 5,
            message: "简介不能少于5个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 上传图片
      action: "http://140.210.201.158:8890/common/common/upload/file", // 地址
      header: { accessToken: uni.getStorageSync("token") },
      fileList: [], //上传图片的数组
      // button
      buttonStyle: {
        width: "100%",
        color: "#fff",
        fontSize: "32rpx",
        backgroundColor: "#F4333C",
      },
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  computed: {
    imgStr() {
      return this.fileList.join(",");
    },
    getDate() {
      const timer = new Date();
      let year = timer.getFullYear();
      let month = timer.getMonth();
      let day = timer.getDate();
      return `${year}-${month + 1}-${day}`;
    },
  },
  methods: {
    switchBack() {
      uni.navigateTo({
        url: "/pages/tabbar/user/myFunction?val=锻炼记录",
      });
      // this.$navTo.navTos('/pages/tabbar/user/myFunction',"锻炼记录")
    },
    uploadedOK(val) {
      let imgStr = [];
      for (let item of val) {
        imgStr.push(item.response.result);
        if (item.response.code == 200) {
          this.$u.toast("添加成功");
        }
      }
      this.fileList = imgStr;
    },
    remove(index, lists) {
      this.fileList.splice(index, 1);
    },
    submit() {
      let parms = {
        content: this.form.content,
        // createTime:this.getDate,
        pic: this.imgStr,
      };
      API.saveExerciseRecordAsync(parms).then((res) => {
        if (res.code == 200) {
          uni.navigateTo({
            url: "/pages/tabbar/user/myFunction?val=锻炼记录",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.perch_box {
  height: 88rpx;
}
.header {
  width: 100%;
  background-color: #fff;
  padding: 88rpx 24rpx 0;
  height: 88rpx;
  line-height: 88rpx;
  position: fixed;
  top: 0;
  left: 0;
  .header-title {
    display: flex;
  }
  .icons {
    position: absolute;
    left: 24rpx;
  }
  .title {
    width: 100%;
    text-align: center;
    margin-left: 15rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .manage {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f4333c;
    line-height: 88rpx;
    /deep/.u-iconfont {
      margin-left: 10rpx;
    }
  }
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .u-form {
    flex: 1;
    overflow: hidden;
    overflow-y: scroll;
  }
}

// 表单
.u-form-item {
  width: 100%;
}

.common-msg-show {
  padding-top: 30rpx;

  .information-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    > .img {
      width: 5rpx;
      height: 28rpx;
    }

    > text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .common-msg-row {
    position: relative;
    padding: 0rpx 12rpx;
    margin-bottom: 50rpx;
    width: 100%;
    background: #fff;
    border-radius: 14rpx;

    // 计算数字
    .numerical {
      position: absolute;
      right: 24rpx;
      bottom: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
      line-height: 40rpx;
    }

    ::v-deep.u-form-item__message {
      position: absolute;
      bottom: -12px;
      left: -38px;
    }

    ::v-deep.u-list-item {
      margin: 4rpx;
    }
  }
  .no-bgcolor {
    background-color: transparent;
  }
}
// 图片
.add-img-row {
  width: inherit;
  display: flex;
  flex-wrap: wrap;
  $w: 180rpx;
  // 上传模拟
  .add-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12rpx;
    margin-right: 30rpx;
    width: $w;
    height: $w;
    background: #f6f5f8;
    border-radius: 10rpx;
    > .img {
      width: 80rpx;
      height: 80rpx;
    }
  }
  .add-img-detail {
    width: $w;
    height: $w;
    border-radius: 12rpx;
    position: relative;
    margin-top: 12rpx;
    .add {
      width: $w;
      height: $w;
    }

    .del {
      width: 28rpx;
      height: 28rpx;
      position: absolute;
      right: -14rpx;
      top: -14rpx;
    }
  }
  // .add-img-detail:nth-of-type(2) {
  // 	margin-left: 30rpx;
  // 	margin-right: 30rpx;
  // }
}
.upload-bg {
  padding: 10px;
  border-radius: 8rpx;
  background-color: #ffffff;
  margin-bottom: 140rpx;
}
.img_ft {
  font-size: 30rpx;
  margin-bottom: 15rpx;
}
.add-title {
  font-size: 30rpx;
  padding: 15rpx 0;
}
</style>
